<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定制ECharts图表相关配置</title>
    <style>
        .box {
            width: 450px;
            height: 450px;
            background-color: pink;
        }
    </style>
    <script src="js/echarts.min.js"></script>
</head>

<body>

<div class="box"></div>
<script>
    var myChart = echarts.init(document.querySelector('.box'));
    var option = {
        color: ['pink', 'blue', 'green', 'skyblue', 'red'],
        title: {
            text: '我的折线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['直播营销', '联盟广告', '视频广告', '直接访问']
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签
            // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
            boundaryGap: false,
            data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '直播营销',
                // 图表类型是线形图
                type: 'line',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',

                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',

                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',

                data: [320, 332, 301, 334, 390, 330, 320]
            }
        ]
    };

    myChart.setOption(option);
</script>
</body>

</html>
